@charset "UTF-8";
@import "../mixins/index.scss";
@import "../variables/default.scss";

@include prefix(detail) {
  &__title {
    position: relative;
    @include display-flex();
    @include justify-content(space-between);
    @include align-items(center);
    padding: 8px;

    h3 {
      margin-left: 5px;
      font-size: $jlf-detail-font-size;
      line-height: $jlf-detail-line-height;
      color: $color-text-title;
      font-weight: 600;
    }
    &::before {
      position: absolute;
      top: 25%;
      left: 0;
      content: "";
      height: 20px;
      width: 3px;
      background-color: $--color-info;
    }
  }

  &__status {
    font-size: $font-size-base;
    color: $--color-white;
    padding: 5px 10px;
    background-color: #1aad19;
    border-radius: 12px;
    box-sizing: border-box;
  }
  &__control {
    margin-right: 5px;
    @include display-flex();
    @include justify-content(space-between);
    @include align-items(center);

    &--triangle {
      width: 0;
      height: 0;
      margin-right: 4px;

      &-down {
        border-left: $jlf-detail-border-line solid transparent;
        border-right: $jlf-detail-border-line solid transparent;
        border-bottom: $jlf-detail-border-bottom solid $jlf-detail-border-color;
      }

      &-up {
        border-left: $jlf-detail-border-line solid transparent;
        border-right: $jlf-detail-border-line solid transparent;
        border-top: $jlf-detail-border-bottom solid $jlf-detail-border-color;
      }
    }

    &--text {
      font-size: $font-size-sm;
      color: $color-text-base;
    }
  }

  &__area {
    @include display-flex();
    @include justify-content(space-between);
    @include align-items(center);

    padding: 15px 0;
    line-height: 20px;
    border-bottom: 1px solid #e3e5e9;
    &--left {
      min-width: 100px;
      width: fit-content;
    }
    &--right {
      word-break: break-all;
    }
    &:last-child {
      border-bottom: 0;
    }
  }

  &__content {

    padding: 10px;
    background-color: $color-bg;
    border-radius: $border-radius-lg;
    box-shadow: 0px 0px 18px 0px rgb(68 89 118 / 25%);
    overflow: hidden;

    &-map {
      &--address {
        font-size: $font-size-base;
        padding: 2px 6px;
        margin: 12px 0;
        color: #171819;
      }
      .map {
        width: 100%;
      }
    }

    &-images {
      width: 100%;
      &--content {
        @include display-flex();
        @include justify-content();
        @include align-items(center);
        @include flex-wrap(wrap);
        box-sizing: border-box;

        &--item {
          width: $jlf-detail-images-width;
          height: $jlf-detail-images-height;
          margin: 5px;
          border-radius: $border-radius-sm;
          img {
            width: 100%;
            height: 100%;
          }
        }

        @media only screen and (max-width: 391px) {
          & {
            @include justify-content();
          }
          &--item {
            width: $jlf-detail-images-width;
            height: $jlf-detail-images-height;
          }
        }
      }
    }

    &-feedback {
      &--title {
        font-size: $font-size-xl;
        line-height: 1.5;
        color: #2c405a;
        font-weight: 500;

        span:last-child {
          float: right;
        }

      }
      
      textarea {
        width: $jlf-detail-textarea-width;
        height: $jlf-detail-textarea-height;
        font-family: Microsoft YaHei;
        font-weight: 400;
        padding: $spacing-v-md;
        font-size: $font-size-xl;
        resize: none;
        border: 0;
        border-radius: 6px;
        outline-style: none;
      }
    }
  }
}
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}